<template>
	<gui-page class="container">
		<!-- 请开始您的开发 ~ -->
		<template v-slot:gBody>
			<view class="login_text">
				<view>您 好,</view>
				<view style="margin-top: 7px;">欢 迎 登 录</view>
			</view>
			<view class="login_form">
				<form @submit="submit">
					<view style="padding-top:20rpx;">
						<text class="gui-text gui-color-black" style="color: rgb(12, 37, 78);">账号</text>
					</view>
					<view style="padding:15rpx 0;" class="gui-border-b">
						<input type="text" v-model="formData.userName" name="userName" class="gui-form-input" placeholder="请输入您的账号" />
					</view>
					<view style="padding-top:20rpx;">
						<text class="gui-text gui-color-black" style="color: rgb(12, 37, 78);">密码</text>
					</view>
					<view style="padding:15rpx 0;" class="gui-border-b">
						<input type="password" v-model="formData.password" name="password" class="gui-form-input" placeholder="请输入您的密码" />
					</view>
					<view style="margin-top:38rpx;">
						<button type="default" class="gui-button gui-bg-blue gui-noborder" formType="submit"
							style="border-radius:50rpx;">
							<text class="gui-color-white gui-button-text">登录</text>
						</button>
					</view>
				</form>


			</view>

		</template>
	</gui-page>
</template>

<script>
	import graceChecker from "@/Grace6/js/checker.js";
	import graceJS from "@/Grace6/js/grace.js";
	import BASE_URL from '@/config/api.js'
	export default {
		data() {
			return {
				formData: {
					userName: '',
					password: ''
				},
				token:''
			}
		},
		methods: {
			submit: function(e) {
				// 表单数据
				var formData = e.detail.value;
				console.log(formData);
				// 利用 graceUI 的表单验证工具进行验证
				//定义表单规则
				var rule = [{
						name: "userName",
						checkType: "string",
						checkRule: "1,50",
						errorMsg: "登录账户输入有误,不能为空，最多50个字符"
					},
					{
						name: "password",
						checkType: "string",
						checkRule: "1,100",
						errorMsg: "登录密码不能为空"
					},
				];
				var checkRes = graceChecker.check(formData, rule);
				if (checkRes) {
					
					graceJS.post(
						BASE_URL + '/sys/login', {
							userName: formData.userName,
							password: formData.password
						},
						'form', {},
						(res) => {
							
							if(res.success==true){
								this.token=res.token;
								//获取用户信息
								graceJS.get(
									BASE_URL + '/sys/user/info',
									{}, // url 参数对象
									{Token:res.token}, // header 对象
									(res)=>{
										
										var userInfo = {token:this.token,userId:res.user.id};
										graceJS.setStorage(userInfo);
										graceJS.navigate('/pages/index/index', 'navigateTo');
									}
								);
								
							}else{
								uni.showToast({
									title: res.msg,
									icon: "none"
								});
							}
						},
						(e) => {
							console.log(e);
						}
					);
					// 根据项目需要完成数据验证工作
				} else {
					uni.showToast({
						title: graceChecker.error,
						icon: "none"
					});
				}
			}
		}
	}
</script>
<style scoped>
	.container {
		background-image: url(../../static/img/bd.png);
		background-size: contain;
	}

	.login_text {
		font-size: 20px;
		margin-top: 200rpx;
		margin-left: 40px;
		font-weight: bold;
		font-style: italic;
		color: rgb(12, 37, 78);
	}

	.login_form {
		padding: 40rpx;
		margin-top: 50rpx;
		background-color: white;
		height: 1200rpx;
		border-top-left-radius: 2em;
		border-top-right-radius: 2em;
	}
</style>